import 'package:flutter/material.dart';
import '../../model/post.dart';

// 首页面显示
class HomePage extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text("Flutter Sliver Demo"),
      // ),
      body: CustomScrollView(
        slivers: <Widget> [
          SliverAppBar(
            // title: Text("Flutter Sliver Demo"),
            // pinned: true, // 将 AppBar 固定在顶部
            floating: true,
            expandedHeight: 178.0, // 设置伸展的弹性高度
            flexibleSpace: FlexibleSpaceBar(
              title: Text(
                "Hello Flutter".toUpperCase(),
                style: TextStyle(
                  fontSize: 15.0,
                  letterSpacing: 3.0,
                  fontWeight: FontWeight.w400,
                ),
              ),
              background: Image(image: AssetImage("assets/images/3.jpg"), fit: BoxFit.cover,),
            ),
          ),
          SliverSafeArea( // 在安全的区域内显示
            sliver: SliverPadding(
              padding: EdgeInsets.all(8.0), // 设置边距
              sliver: SliverListDemo(),
            )
          ),
        ],
      ),
    );
  }
}

// Sliver 列表视图示例
class SliverListDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) { // 创建子部件
          return Padding(
            // padding: EdgeInsets.all(8.0), // 添加内边距
            padding: EdgeInsets.only(bottom: 32.0), // 只添加底部的内边距
            child: Material(
              borderRadius: BorderRadius.circular(12.0),
              elevation: 14.0,
              shadowColor: Colors.grey.withOpacity(0.5),
              child: Stack(
                children: [
                  AspectRatio(
                    aspectRatio: 16/9,
                    child: Image(image: AssetImage(posts[index].imageUrl), fit: BoxFit.cover,),
                  ),
                  Positioned(
                    bottom: 8.0,
                    left: 8.0,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(posts[index].title,
                          style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.blue,
                          ),
                        ),
                        Text(posts[index].author,
                          style: TextStyle(
                            fontSize: 16.0,
                            color: Colors.blue,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        },
        childCount: posts.length, // 设置子部件的个数
      ), 
    );
  }
}

// Sliver 网格视图示例
class SliverGridDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2, // 设置交叉轴子部件显示的个数
        crossAxisSpacing: 8.0,
        mainAxisSpacing: 8.0,
        childAspectRatio: 1.0, // 控制网格视图显示的比例，默认为 1.0
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) { // 创建子部件
          return Container(
            child: Image(image: AssetImage(posts[index].imageUrl), fit: BoxFit.cover,),
          );
        },
        childCount: posts.length, // 设置子部件的个数
      ), 
    );
  }
}